Skip to main content

Quick Start - Angular

How to use dxchart5-react with Angular based apps​

To use a React library inside an Angular component, we'll need to embed React components within Angular.
Here’s a step-by-step guide to get you going:

We need to create 3 files​

  • MyReactWrapper.tsx
import React from "react";
import { ChartReactApp } from "@dx-private/dxchart5-react/dist/chart/chart-react-app";
import { CREATE_MOCK_PROVIDERS } from "@dx-private/dxchart5-react-mock-providers/dist";

interface Props {
  someProp: string;
}

const MyReactWrapper: React.FC<Props> = () => {
  return (
    <div className="App" style={{ height: 576, width: 800 }}>
      <ChartReactApp dependencies={{ ...(CREATE_MOCK_PROVIDERS() as any) }} />
    </div>
  );
};

export default MyReactWrapper;
  • renderReactComponent.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import MyReactWrapper from './MyReactWrapper';

export function renderReactComponent(element: HTMLElement, props: { someProp: string }) {
	const root = ReactDOM.createRoot(element);
	root.render(<MyReactWrapper {...props} />);
	return () => root.unmount(); // cleanup function
}
  • react-wrapper.component.ts (Angular file)
import {
  Component,
  ElementRef,
  AfterViewInit,
  OnDestroy,
  ViewChild,
} from '@angular/core';
import { renderReactComponent } from './renderReactComponent';

@Component({
  selector: 'app-react-wrapper',
  template: `<div #reactContainer></div>`,
})
export class ReactWrapperComponent implements AfterViewInit, OnDestroy {
  @ViewChild('reactContainer', { static: true }) containerRef!: ElementRef;

  private cleanup: (() => void) | undefined;

  ngAfterViewInit() {
    this.cleanup = renderReactComponent(this.containerRef.nativeElement, {
      someProp: 'Hello from Angular!',
    });
  }

  ngOnDestroy() {
    if (this.cleanup) {
      this.cleanup();
    }
  }
}

After that just include <app-react-wrapper></app-react-wrapper> in your index.html

Your package.json file should look something like this

{
	"dependencies": {
		"@angular/common": "^19.2.0",
		"@angular/compiler": "^19.2.0",
		"@angular/core": "^19.2.0",
		"@angular/forms": "^19.2.0",
		"@angular/platform-browser": "^19.2.0",
		"@angular/platform-browser-dynamic": "^19.2.0",
		"@angular/router": "^19.2.0",
		"@devexperts/dxcharts-lite": "^2.7.6",
		"@dx-private/dxchart5-modules": "^5.14.7",
		"@dx-private/dxchart5-react": "^5.14.7",
		"@dx-private/dxstudies": "^59.0.1747920660503",
		"@dx-private/dxchart5-react-mock-providers": "1.0.1",
		"react": "18.3.0",
		"react-dom": "18.3.0",
		"rxjs": "~7.8.0",
		"tslib": "^2.3.0",
		"zone.js": "~0.15.0"
	},
	"devDependencies": {
		"@angular-devkit/build-angular": "^19.2.13",
		"@angular/cli": "^19.2.13",
		"@angular/compiler-cli": "^19.2.0",
		"@types/jasmine": "~5.1.0",
		"@types/react": "^19.1.6",
		"@types/react-dom": "^19.1.5",
		"jasmine-core": "~5.6.0",
		"karma": "~6.4.0",
		"karma-chrome-launcher": "~3.2.0",
		"karma-coverage": "~2.2.0",
		"karma-jasmine": "~5.1.0",
		"karma-jasmine-html-reporter": "~2.1.0",
		"typescript": "~5.7.2"
	}
}

Then you should see the following.

That's the bare minimum usage with mock data.

Issues that you might run into​

  • Module './renderReactComponent' was resolved to 'angular-app/src/app/renderReactComponent.tsx', but '--jsx' is not set.ts(6142)

This error happens because TypeScript doesn’t know how to handle .tsx files by default in an Angular project, since Angular projects typically use .ts files only and don’t enable JSX support.
In order to fix this navigate to tsconfig.json and add

"compilerOptions": {
	"jsx": "react-jsx",
  • Inside of renderReactComponent.tsx I get this error Internal server error: Failed to resolve import "react-dom/client" from ".angular/vite-root/angular-app/main.js". Does the file exist?

Angular app is running with Vite, and Vite doesn't recognize react-dom/client (or other React modules) unless they are properly installed and Vite is configured to handle React correctly. The react-dom/client import is only available in React 18+ In this case just update to React 18+, if are on an older version you can use a "react-compatible" vite plugin such as "@vitejs/plugin-react"

Enjoy!​

How to configure dxchart5-react library​

dxchart5-react has a very strong configuration abilities, most of the time you would need to change it for your needs.

All the configurable stuff could be found on configuration reference page.

Further reading​